<template>
  <div class="dh-collapseitem" :class="{ 'is-disabled': disabled }">
    <div
      class="dh-collapse-item__header"
      :id="`dh-collapse-item__header__${name}`"
      :class="{
        'is-disabled': disabled,
        'is-active': isActive,
      }"
      @click="handleClick"
    >
      <slot name="title">{{ title }}</slot>
      <Icon icon="angle-right" class="header-angle" ></Icon>
    </div>
    <Transition name="slider" v-on="transitionEvents">
      <div class="dh-collapse-item__wrap" v-show="isActive">
        <div
        class="dh-collapse-item__content"
        :id="`dh-collapse-item__content__${name}`"
       
      >
        <slot></slot>
        
      </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { inject, computed } from "vue";
import Icon from "../Icon/Icon.vue";
import { type collapseItemProps, collapseContextKey } from "./type";
//接收数据
let props = defineProps<collapseItemProps>();
//定义组件名称
defineOptions({
  name: "DhCollapseItem",
});
//接收父组件传递的数据
let collapseContext = inject(collapseContextKey);
//计算出是否显示
let isActive = computed(() => {
  //判断传递的name值是否在父元素传递的数组里，如果是就显示，如果不是就隐藏
  return collapseContext?.activeName.value.includes(props.name);
});
const handleClick = () => {
  //点击事件
  //判断是否禁用
  //禁用就直接返回
  if (props.disabled) return;
  //判断是否展开
  collapseContext?.handleractiveName(props.name);
};
const transitionEvents: Record<string, (el: HTMLElement) => void> = {
  beforeEnter(el) {
    el.style.height = "0px";
    el.style.overflow = "hidden";
  },
  enter(el) {
    el.style.height = `${el.scrollHeight}px`;
  },
  afterEnter(el) {
    el.style.height = "";
    el.style.overflow = "";
  },
  beforeLeave(el) {
    el.style.height = `${el.scrollHeight}px`;
    el.style.overflow = "hidden";
  },
  leave(el) {
    el.style.height = "0px";
  },
  afterLeave(el) {
    el.style.height = "";
    el.style.overflow = "";
  },
};
</script>

<style scoped></style>
